iT邦幫忙

2022 iThome 鐵人賽

DAY 16
2

畢氏定理是國中階段最最重要的幾何性質,也是解析幾何的根本要素。大部分的人都能熟練的應用畢氏定理,但是,除了數學老師,卻少有人能證明畢氏理。有人曾收錄了數百個畢氏定理證明,今天,我們就利用圖形轉換的方法來證明畢氏定理。

HTML架構

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide1">
      <div class="left">
        <div id="box1" class="jxgbox" style="width: 500px;height: 500px;"></div>
      </div>
      <div class="right">
        ...
      </div>
    </div>
    <div class="swiper-slide slide2">
      <div class="left">
        <div id="box2" class="jxgbox" style="width: 500px;height: 500px;"></div>
      </div>
      <div class="right">
        ...
      </div>
    </div>
    <div class="swiper-slide slide3">
      <div class="left">
        <div id="box3" class="jxgbox" style="width: 500px;height: 500px;"></div>
      </div>
      <div class="right">
        ...
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <a href="#" class="prev-btn"><i class="fa-solid fa-angles-left"></i></a>
  <a href="#" class="next-btn"><i class="fa-solid fa-angles-right"></i></a>
</div>

我們每一個跑馬燈(投影片)左邊都放置了一個JSXGraph的board在容器#box1#box2#box3

ES6模組(Module)

當程式愈來愈大,我們便需要將我們的程式加以組織並模組化,以方便我們管理我們的程式。Javascript自ES6支援了模組化系統,一個檔案就是一個模組,在模組中使用export(匯出)關鍵字來匯出模組中的常數或變數資料,也可以匯出函式,例如在檔案test1.js中,

export const A = 45
exprot let b = 20
export function add_b(x) {
    return x + b
}

然後在需要這些常數、變數或函式的檔案中使用import關鍵字匯入所需要的資料,例如在test2.js中

import {A, b, add_b} from 'test1.js'

如此便可以在test2.js中使用A、b和函式。

範例設計

在畢氏定理證明的範例中,每個board各自獨立成一個模組(module),並建立一個物件放置所產生的幾何元素。以board2為例,

export const board2 = JXG.JSXGraph.initBoard('box2', boardOptions)
export const board2Elements = {}
board2Elements.pointC = board2.create('point', [-9, -9], { name: '\\(C\\)', size: 0, color: 'black', label: { color: 'black' } })

以下是slide2的初始畫面
image1
我們創建了二個看不見的滑桿s和t,其值介於0和1。並讓三角形GEB以B點為軸順時針旋轉-Math.PI * t.Value() ;三角形FGH以H點為軸逆時針旋轉Math.PI * s.Value()

接著在旋轉三角形GEB和旋轉三角形HFG加入監聽,回呼函式中我們利用兩個滑桿的moveTo方法,將滑桿移到兩端點的位置進行三角形的旋轉,下面是旋轉三角形GEB的監聽和回呼函式。

let isRotateGEB = false
const rotateGEB = document.querySelector('.rotateGEB')
rotateGEB.addEventListener('click', (e) => {
  isRotateGEB = !isRotateGEB
  if (isRotateGEB) {
    board2Elements.t.moveTo([30, 5], 1000)
  } else {
    board2Elements.t.moveTo([0, 5], 1000)
  }
})

我們可以在畫板適當的位置加入需要的文字以幫助解釋圖案的意義。

board2Elements.textASquare = board2.create('text', [0, 0, '\\(c^2\\)'], {visible: false,color: '#E9EBE9', fontSize: 24, fontUnit: 'px'})
board2Elements.textBSquare = board2.create('text', [-3, 3, '\\(b^2\\)'], {visible: false,color: '#E9EBE9', fontSize: 24, fontUnit: 'px'})
board2Elements.textCSquare = board2.create('text', [6, 6, '\\(a^2\\)'], {visible: false,color: '#E9EBE9', fontSize: 24, fontUnit: 'px'})

但是不建議放入太多的文字解說,如此會讓畫板太過雜亂。

至於slide3的部分,基本上和slide2大同小異,只是用平移代替旋轉。

程式原始碼

今日程式原始碼

今日小結

今天應用了昨天學習的旋轉與平移的JSXGraph轉換元素,也介紹了ES6支援的模組化系統,利用模組化系統,我們可以輕鬆的管理我們的程式,讓它更具有延伸性和擴展性。以今天的例子來說,我們可以隨時增加新的證明放入新的slide中,如果有興趣的朋友,也可以實作看看,明天見!


上一篇
JSXGraph的多邊形與轉換
下一篇
Koch曲線
系列文
30天數學老師作互動式教學網頁30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
黑修斯
iT邦新手 4 級 ‧ 2022-09-20 16:35:12

值得支持的好文章,讚

olddunk iT邦新手 5 級 ‧ 2022-09-20 16:38:56 檢舉

謝謝支持,繼續加油!

我要留言

立即登入留言